<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、编译阶段</h2>
  <div>回顾Vue2，我们知道每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把用到的数据property记录为依赖，当依赖发生改变，触发setter，则会通知watcher，从而使关联的组件重新渲染</div>
  <h4>diff算法优化</h4>
  <div>vue3在diff算法中相比vue2增加了静态标记,关于这个静态标记，其作用是为了会发生变化的地方添加一个flag标记，下次发生变化的时候直接找该地方进行比较</div>
  <h4>静态提升</h4>
  <div>Vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用,这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操作，优化了运行时候的内存占用</div>
  <h4>事件监听缓存</h4>
  <div>默认情况下绑定事件行为会被视为动态绑定，所以每次都会去追踪它的变化,开启了缓存后，没有了静态标记。也就是说下次diff算法的时候直接使用</div>
  <h4>SSR优化</h4>
  <div>当静态内容大到一定量级时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染</div>
  <h4>二、源码体积</h4>
  <div>Tree shanking,任何一个函数，如ref、reavtived、computed等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小</div>
  <h4>三、响应式系统</h4>
  <div>vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，实现响应式
  vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历</div>
  <ul>
    <li>可以监听动态属性的添加</li>
    <li>可以监听到数组的索引和数组length属性</li>
    <li>可以监听删除属性</li>
  </ul>
</body>
</html>